<template>
  <div class="asset-box">
    <div class="asset" v-for="(item,index) in assetList" :key="index">
      <div @click="handleGoAssetDetail(item.id)">
        <van-image
          width="152px"
          height="152px"
          :src="item.image_url"
        />
        <div class="asset-title">{{ item.f_name }}</div>
      </div>
      <div class="mt-8">
        <!--
              re_other_status
              领用记录状态：0正常 1报修中 2转移中 3退还中 4报失中
              0: 正常     四个按钮都显示
              1: 报修中   报修按钮type="danger", 其他 按钮边框type="info" 并且不能点击 (2/3/4状态 相同)
        -->
        <!-- <van-button plain type="danger" size="mini" round @click="handleOperate(types.REPAIR,item.id)">报修</van-button> -->

        <van-button
          plain
          :disabled="[1,2,3,4].includes(item.re_other_status)"
          :type="[0,2,3,4].includes(item.re_other_status)?'info':'danger'"
          size="mini"
          round
          @click="handleOperate(types.REPAIR,item.id, item.re_id)"
        >
          报修
        </van-button>

        <van-button
          plain
          :disabled="[1,2,3,4].includes(item.re_other_status)"
          :type="[0,1,3,4].includes(item.re_other_status)?'info':'danger'"
          size="mini"
          round
          @click="handleOperate(types.TRANSFER,item.id,item.re_id)"
        >
          转移
        </van-button>

        <van-button
          plain
          :disabled="[1,2,3,4].includes(item.re_other_status)"
          :type="[0,1,2,4].includes(item.re_other_status)?'info':'danger'"
          size="mini"
          round
          @click="handleOperate(types.RETURN,item.id,item.re_id)"
        >
          退还
        </van-button>

        <van-button
          v-show="islossBtnShow"
          plain
          :disabled="[1,2,3,4].includes(item.re_other_status)"
          :type="[0,1,2,3].includes(item.re_other_status)?'info':'danger'"
          size="mini"
          round
          @click="handleOperate(types.LOSS,item.id,item.re_id)"
        >
          报失
        </van-button>
      </div>
    </div>
    <van-divider>- 我是有底线的 -</van-divider>
  </div>
</template>

<script>
import { OPERATE_TYPES } from '@/constant';

export default {
  name: 'Asset',
  props: {
    // 列表
    assetList: {
      type: Array
    },
    // 是否显示报失按钮
    islossBtnShow: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      types: OPERATE_TYPES // 操作类型常量
    };
  },
  methods: {
    // 前往资产详情
    handleGoAssetDetail (id) {
      this.$emit('go-detail', id);
    },
    // 操作
    handleOperate (type, id, re_id) {
      this.$emit('go-operate', type, id, re_id);
    }
  }
};
</script>

<style lang="scss" scoped>
  .asset-box {
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #f8f9fd;
    .asset {
      width: 182px;
      background-color: #fff;
      box-sizing: border-box;
      padding: 12px;
      border-radius: 3px;
      box-shadow: 0px 0px 9px 2px rgba(221, 221, 221, 0.31);
      margin: 10px 0 0 0;
    }
    .asset-title {
      margin-top: 5px;
      color: #101010;
      line-height: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    // mini按钮
    .van-button--mini+.van-button--mini {
      margin-left: 5px;
    }
    .van-button--mini {
      min-width: 35px;
      font-size: 12px;
    }
    ::v-deep.van-divider {
      width: 100%;
    }
  }
</style>
